<template>
    <div class="container">
        <router-link tag="div" to="/" class="header_abs" v-show="headerAbs">
            <span class="iconfont back header_abs_back">&#xe600;</span>
        </router-link>
        <router-link tag="div" to="/" class="header_fixed" v-show="!headerAbs" :style="opacityStyle">
             <span class="iconfont header_fixed_back">&#xe600;</span>
              <p class="title">景点详情</p>
        </router-link>
    </div>
</template>
<script>
export default {
  name: 'detailHeader',
  data () {
    return {
      headerAbs: true,
      opacityStyle: {
        opacity: 0
      }
    }
  },
  methods: {
    handleScroll () {
      let Top = document.documentElement.scrollTop
      // console.log('Top', Top)
      if (Top > 50) {
        let opacity = Top / 200
        opacity = opacity > 1 ? 1 : opacity
        this.opacityStyle = { opacity }
        this.headerAbs = false
      } else {
        this.headerAbs = true
      }
    }
  },
  // keep-alive提供的生命周期
  mounted () {
    // console.log('111', 111)
    window.addEventListener('scroll', this.handleScroll)
  }
  // 当前页面被关闭时清除removeEventListener,因为windows是作用于全局的
  // deactivated () {
  //   window.removeEventListener('scroll', this.handleScroll)
  // }
}
</script>

<style scoped>
   .header_abs {
        position: absolute;
        top: .6rem;
        left: .6rem;
        width: 2.4rem;
        height: 2.4rem;
        line-height: 2.4rem;
        text-align: center;
        background: rgba(0,0,0,.6);
        border-radius: 1.2rem;
   }
   .header_abs_back{
        color: #fff;
        font-size: 1.4rem;
   }
   .header_fixed{
        z-index: 9;
        position: fixed;
        left: 0;
        right: 0;
        top: 0;
        height: 2.4rem;
        line-height: 2.4rem;
        background-color: #00bcd4;
        color: #fff;
        text-align: center;
   }
   .header_fixed_back {
        width: 3rem;
        float: left;
        color: #fff;
        font-size: 20px!important;
        font-weight: bolder;
   }
   .title{
        width: 100px;
        position: absolute;
        top: 0px;
        left: 50%;
        padding: 0;
        margin: 0;
        margin-left: -50px;
        font-size: 1.1rem;
        font-weight: 600;
    }
</style>
